<template>
  <div class="mod-config" >
    <el-form :model="dataForm" label-width="100px">
        <h3>大转盘活动设置</h3>
        <el-form :inline="true" :model="dataForm">
          <el-form-item>
            <el-button  type="primary" @click="addOrUpdateHandle1()">新增大转盘</el-button>
            <el-button type="primary" size="small" @click="addOrUpdateHandle2()">修改</el-button>
            <el-button type="primary" size="small" @click="deleteHandle()">删除</el-button>
            <el-button  type="danger" @click="addOrUpdateHandle5()">抽奖记录</el-button>
            <el-button  type="info" @click="addOrUpdateHandle4(1)">每日任务设置</el-button>
            <el-button  type="info" @click="addOrUpdateHandle4(2)">成长任务设置</el-button>
            <el-button  type="info" @click="signIN()">每日签到设置</el-button>
          </el-form-item>
          <el-table
            :data="dataList"
            :header-cell-style="tableHeaderColor"
            :row-style="tableRowStyle"
            ref="table"
            stripe
            highlight-current-row
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="1">
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="58"
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              header-align="center"
              align="center"
              label="模板名称">
            </el-table-column>
            <el-table-column
              prop="id"
              header-align="center"
              align="center"
              label="id">
            </el-table-column>
            <el-table-column
              prop="remark"
              header-align="center"
              align="center"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="imageUrl"
              header-align="center"
              align="center"
              label="图标">
              <template slot-scope="scope">
                <el-popover
                  placement="right"
                  title=""
                  trigger="hover">
                  <img :src="'http://image.yilianbaihui.cn/consumer/' + scope.row.imageUrl" style="height: 220px; width: 220px"/>
                  <img slot="reference" :src="'http://image.yilianbaihui.cn/consumer/' + scope.row.imageUrl" :alt="'http://image.yilianbaihui.cn/consumer/' + scope.row.imageUrl" style="max-height: 130px;max-width: 130px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="beginTime"
              header-align="center"
              align="center"
              label="活动开始时间">
            </el-table-column>
            <el-table-column
              prop="endTime"
              header-align="center"
              align="center"
              label="活动结果时间">
            </el-table-column>
            <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              label="活动创建时间">
            </el-table-column>
            <el-table-column
              prop="enableState"
              header-align="center"
              align="center"
              label="启用">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.enableState"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  validate-event="true"
                  @change="enableChange(dataList[scope.$index].id,scope.row.count, scope.row.enableState)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作">
              <template slot-scope="scope">
                <el-button  type="danger" size="mini" @click="addOrUpdateActivityData(scope.row.id,0,scope.row.subPrizeVo)">添加活动数据</el-button>
                <el-button type="danger" size="mini" style="margin:10px 0px 0 1px" @click="toogleExpand(scope.row)">查看活动数据</el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" width="1">
              <template slot-scope="props">
                <el-table
                  :data="props.row.subPrizeVo"
                  :header-cell-style="tableHeaderColor2"
                  border
                  highlight-current-row
                  v-loading="subdataListLoading"
                  style="width: 100%;">
                  <!--<el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                  </el-table-column>-->
                  <el-table-column
                    prop="sort"
                    header-align="center"
                    align="center"
                    label="排序">
                  </el-table-column>
                  <el-table-column
                    prop="prizeName"
                    header-align="center"
                    align="center"
                    label="奖品名称">
                  </el-table-column>
                  <el-table-column
                    prop="prizeType"
                    header-align="center"
                    align="center"
                    label="奖品类型">
                    <template slot-scope="props">
                      <label v-if="props.row.prizeType === 1">积分</label>
                      <label v-if="props.row.prizeType === 2">购物卷</label>
                      <label v-if="props.row.prizeType === 3">商品</label>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="prizeNumber"
                    header-align="center"
                    align="center"
                    label="奖品数量">
                    <template slot-scope="props">
                      <label v-if="props.row.prizeNumber === -1">无限</label>
                      <label v-if="props.row.prizeNumber != -1">{{props.row.prizeNumber}}</label>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="prizeAllowance"
                    header-align="center"
                    align="center"
                    label="奖品余量">
                    <template slot-scope="props">
                      <label v-if="props.row.prizeAllowance === -1">无限</label>
                      <label v-if="props.row.prizeAllowance != -1">{{props.row.prizeAllowance}}</label>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="prizeProbability"
                    header-align="center"
                    align="center"
                    label="中奖概率">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="150"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="addOrUpdateActivityData(props.row.id,scope.row.id,props.row.subPrizeVo)"><el-tag>修改</el-tag></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </el-form>
    <!-- 新增/修改模板信息-->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>
    <!-- 添加活动数据-->
    <add-activity v-if="AddActivityVisible" ref="addActivity" @refreshDataList="getRowList"/>
    <daily-tasks v-if="DailyTasksVisible" ref="dailyTasks" @refreshDataList="getDataList"/>
    <activity-sign v-if="ActivitySignVisible" ref="activitySign" @refreshDataList="getDataList"/>
    <activity-user-log v-if="ActivityUserLogVisible" ref="activityUserLog" @refreshDataList="getDataList"/>
  </div>
</template>
<script>
  import AddOrUpdate from './add-turntable'
  import AddActivity from './add-activity'
  import DailyTasks from './activity-dailytasks'
  import ActivitySign from './activity-sign'
  import ActivityUserLog from './activity-userlog'
  export default {
    data () {
      return {
        subSortList: [],
        dataList: [],
        subdataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        ActivityUserLogVisible: false,
        ActivitySignVisible: false,
        DailyTasksVisible: false,
        dataListLoading: false,
        subdataListLoading: false,
        AddActivityVisible: false,
        addOrUpdateVisible: false,
        dataListSelections: [],
        dataForm: {}
      }
    },
    components: {
      AddOrUpdate,
      AddActivity,
      DailyTasks,
      ActivitySign,
      ActivityUserLog
    },
    activated () {
      this.getDataList()
    },
    methods: {
      getRowList () {
        this.$http({
          url: this.$http.adornUrl('/sign/querySignTurntableList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            for (var i = 0; i < data.data.list.length; i++) {
              this.dataList[i].subPrizeVo = data.data.list[i].subPrizeVo
              this.totalPage = data.data.totalCount
            }
          } else {
            this.datalist = []
            this.totalPage = 0
          }
        })
      },
      // 获取转盘信息数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sign/querySignTurntableList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.datalist = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      testChange () {
        debugger
      },
      // 开始启用
      enableChange (id, count, state) {
        this.$confirm(`确定对[id=${id}]进行[状态更新]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (count !== 8) {
            return this.$message.error('开启必须为8条数据')
          }
          this.$http({
            url: this.$http.adornUrl(`/sign/modifyTurnTableEnableStateById`),
            method: 'post',
            data: this.$http.adornData({
              'id': id || undefined,
              'enableState': state ? 1 : 0
            }, false)
          }).then(({data}) => {
            if (data === true) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error('只能开启一个模板')
            }
          })
        })
        this.getDataList()
      },
      // 新增 /修改 活动模板
      addOrUpdateHandle1 () {
        debugger
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },
      //  添加 / 修改活动数据
      addOrUpdateActivityData (turnTableId, PrizeId, subPrizeVo) {
        this.AddActivityVisible = true
        this.subSortList = []
        debugger
        for (var i = 0; i < subPrizeVo.length; i++) {
          this.subSortList.push(subPrizeVo[i].sort)
        }
        console.log(this.subSortList)
        if (PrizeId === 0) {
          if (subPrizeVo.length !== undefined) {
            if (subPrizeVo.length > 7) {
              return this.$message.error('数据添加上限')
            }
          }
        }
        console.log(turnTableId)
        console.log(PrizeId)
        debugger
        this.$nextTick(() => {
          this.$refs.addActivity.init(turnTableId, PrizeId, this.subSortList)
        })
      },
      // 修改 活动模板
      addOrUpdateHandle2 () {
        debugger
        if (this.dataListSelections.length === 0) {
          return this.$message.error('请选择模板')
        } else if (this.dataListSelections.length > 1) {
          return this.$message.error('只能选择一个模板')
        }
        var id = this.dataListSelections[0].id
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 每日任务
      addOrUpdateHandle4 (type) {
        console.log(type)
        debugger
        this.DailyTasksVisible = true
        this.$nextTick(() => {
          this.$refs.dailyTasks.init(type)
        })
      },
      // 抽奖记录
      addOrUpdateHandle5 () {
        debugger
        this.ActivityUserLogVisible = true
        this.$nextTick(() => {
          this.$refs.activityUserLog.getDataList()
        })
      },
      signIN () {
        this.ActivitySignVisible = true
        this.$nextTick(() => {
          this.$refs.activitySign.init()
        })
      },
      // 删除 活动模板
      deleteHandle () {
        debugger
        console.log(this.dataListSelections)
        var ids = this.dataListSelections.map(item => {
          return item.id
        })
        var names = this.dataListSelections.map(item => {
          return item.name
        })
        console.log(names)
        console.log(ids)
        if (ids.length === 0) {
          this.$message.error('请选择模板')
          return
        }
        this.$confirm(`确定对【模板名称: ${names.join('和')}】进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sign/removeTurntableByIds`),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        console.log(val)
        this.dataListSelections = val
      },
      toogleExpand (row) {
        debugger
        const _this = this
        let $table = _this.$refs.table
        _this.dataList.map((item, index) => {
          if (row.id !== item.id) {
            $table.toggleRowExpansion(item, false)
          } else {
            $table.toggleRowExpansion(item)
          }
        })
      },
      handleClick (tab, event) {
        console.log(tab, event)
      },
      // 修改table tr行的背景色
      tableRowStyle ({ row, rowIndex }) {
        return 'background-color: #;'
      },
      // 修改table header的背景色
      tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #17B3A3;color: #303133;font-weight: 500;'
        }
      },
      tableHeaderColor2 ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #909399;color: #303133;font-weight: 500;'
        }
      }
    }
  }
</script>
<style scoped>
  h3 {
    font-size: 26px;
  }
</style>
